import employees from '@/assets/constant/employees'

export default {
  // 指令名：{生命周期}
  imgerror: {
    inserted(dom, obj, vnode) {
      dom.src = dom.src || obj.value
      dom.onerror = () => (dom.src = obj.value)
    },
    componentUpdated(dom, obj) {
      dom.src = dom.src || obj.value
    },
    unbind(dom, obj) {
      dom.onerror = null
    }
  },
  test: {
    bind(el, binding, vnode, oldVonde) {
      // 四个参数  1 当前dom  2 当前组件所绑定的数据 3 当前最新的this信息 4 没修改之前的this
      // console.log('el:', el)
      // console.log('binding:', binding)
      // console.log('vnode:', vnode)
      // console.log('oldVonde:', oldVonde)
    },
    inserted() {},
    updated() {},
    componentUpdated() {},
    unbind() {}
  },
  hireType: {
    inserted(dom, obj, vnode) {
      const result = employees.hireType.find((item) => {
        return item.id === obj.value
      })
      dom.innerText = result ? result.value : '-'
    },
    componentUpdated(dom, obj) {
      const result = employees.hireType.find((item) => {
        return item.id === obj.value
      })
      dom.innerText = result ? result.value : '='
    }
  },
  // 点击dom以外执行一个回调方法
  clickoutside: {
    inserted(dom, obj, vnode, oldVnode) {
      const fn = (e) => {
        // 包含：判断dom包含关系 冒泡处理 》拿到所有的冒泡路径判断
        if (!dom.contains(e.target)) {
          const callback = obj.value
          callback()
        }
      }
      // 将回调放入组件节点上 中转
      // vnode.fn = fn
      vnode.fn = fn
      // console.log(obj)
      console.log('vnode:', vnode)
      console.log('oldvnode:', oldVnode)

      // 监听传入的回调  以判断是否包含在dom内
      document.addEventListener('click', fn)
    },
    unbind(dom, obj, vnode) {
      // 销毁监听
      document.removeEventListener('click', vnode.fn)
    }
  }
}
